<template>
  <Card
    class="card-wrap h-full relative pt-4"
    body-class=""
    :body-style="{
      padding: 0,
      margin: 0,
      overflowY: 'auto',
      overflowX: 'hidden',
    }"
    :style="styles"
  >
    <div class="w-[370px]" style="height: calc(100% - 50px)">
      <slot />
    </div>
    <div class="close" @click="onClose" :style="closeIconStyle" v-if="showFlag">
      <CaretRightOutlined v-if="isClose" />
      <CaretLeftOutlined v-else />
    </div>
  </Card>
</template>

<script setup lang="tsx">
import { CSSProperties, computed, ref } from 'vue';
import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons-vue';
import { Card } from 'ant-design-vue';

const props = defineProps({
  showFlag: {
    type: Boolean,
    default: true,
  },
});
const isClose = ref<boolean>(false);

const styles = computed<CSSProperties>(() =>
  isClose.value
    ? {
        width: 0,
        border: 0,
      }
    : {
        width: '390px',
        paddingRight: '10px',
        paddingLeft: '8px',
        borderRight: '1px solid rgba(255, 255, 255, 0.16)',
      },
);

const closeIconStyle = computed<CSSProperties>(() => {
  return isClose.value
    ? {
        right: '-18px',
        borderLeft: 0,
        borderTopRightRadius: '4px',
        borderBottomRightRadius: '4px',
      }
    : {
        right: 0,
        borderRight: 0,
        borderTopLeftRadius: '4px',
        borderBottomLeftRadius: '4px',
      };
});

const onClose = () => {
  isClose.value = !isClose.value;
};
</script>

<style lang="scss" scoped>
.card-wrap {
  transition: width ease 0.3s;
  border: none;
  .close {
    position: absolute;
    top: 40%;
    width: 18px;
    height: 74px;
    line-height: 74px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    z-index: 100;

    &:hover {
      background: rgba(255, 255, 255, 0.26);
    }
  }

  &.ant-card,
  .ant-tree {
    background: transparent !important;
  }
}
</style>
